<template>
  <div class="play-record">
    <van-list v-model="loading" :finished="count >= total" :offset="10" @load="curr++" v-if="total">
      <div class="item" v-for="(item, i) in list" :key="i">
        <template v-if="item.list.length">
          <div class="count">{{item.name}}</div>
          <div class="inner clearfix"
               @click="toPlay(course)"
               v-for="course in item.list" :key="course.resources_id">
            <div class="check fl w0 ovh" :class="{def: edit}" @click.stop>
              <div class="check-inner bsb bdr50 ovh tac"
                   @click="editCheck(course)"
                   :class="{checked: checks.includes(course.resource_id)}">
                <van-icon name="success"></van-icon>
              </div>
            </div>
            <img :src="course.format_id === 1 ? course.resources_bigimg : course.course_bgimg" class="bigimg vam fl">
            <div class="text flex-col jce">
              <div class="title wot1">{{course.course_name}}</div>
              <div class="remark wot1">已学至：{{course.resources_name}}</div>
            </div>
          </div>
        </template>
      </div>
    </van-list>
    <div v-else class="no-record tac">
      <img src="../../images/no_play_record.png" class="img vam">
      <div class="tips wsnw">您还没有学习过任何课程哦~<span style="color: #17cff8;" @click="$router.push('/')">去首页</span></div>
    </div>
    <div class="footer pof r0 l0 b0 flex jcb tac pr20 pl20" v-if="total">
      <div v-if="!edit" class="btn w100" @click="edit = true">编辑</div>
      <template v-else>
        <template v-if="!isWx">
          <div class="btn" @click="edit = false; checks = []">取消</div>
          <div class="btn" @click="checks = checks.length === allIds.length ? [] : [...allIds]">
            全{{checks.length === allIds.length ? '不' : ''}}选
          </div>
          <div class="btn del" @click="del">删除({{checks.length}})</div>
        </template>
        <template v-else>
          <div class="footer-btn flex  aic">
            <div class="check  w0 ovh" style="width:2rem;transition: none;" @click.stop>
              <div class="check-inner bsb bdr50 ovh tac"
                   style="margin:0 .3rem;"
                   @click="selectAll"
                   :class="{checked: isChecks}">
                <van-icon name="success"></van-icon>
              </div>
            </div>
            <div class="btn pr20" @click="selectAll">
              全{{checks.length === allIds.length ? '不' : ''}}选
            </div>
            <div class="btn pl20" @click="edit = false; checks = [];isChecks=false">取消</div>
          </div>
          <div class="btn del" @click="del">删除</div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';

  export default {
    name: 'PlayRecord',
    data() {
      return {
        loading: false,
        edit: false,
        checks: [],
        allIds: [],
        curr: 1,
        limits: 10,
        total: 0,
        count: 0,
        list: {
          // 今天
          today: { name: '今天', list: [] },
          // 昨天
          yesterday: { name: '昨天', list: [] },
          // 更早
          earlier: { name: '更早', list: [] }
        },
        isChecks: false
      };
    },
    watch: {
      curr() {
        this.getList();
      }
    },
    computed: {
      ...mapGetters([
        'userInfo',
        'productInfo',
        'hasAudio',
        'isWx'
      ])
    },
    methods: {
      editCheck(course) {
        if (this.checks.includes(course.resource_id)) {
          this.checks = this.checks.filter(e => e !== course.resource_id);
          this.isChecks = false;
        } else {
          this.checks.push(course.resource_id);
        }
        if (this.checks.length === this.allIds.length) {
          this.isChecks = true;
        }
      },
      del() {
        if (!this.checks.length) return this.$toast('请至少选择一个');
        this.$dialog.confirm({
          message: '您确定要删除嘛?'
        }).then(() => {
          this.http.$post('api/user/del_record', {
            uid: this.userInfo.uid,
            resource_id: this.checks.join(','),
            channel_id: this.productInfo.channel_id,
            terminal_id: this.productInfo.terminal_id,
            product_id: this.productInfo.product_id
          }).then(res => {
            this.$toast.success('删除成功');
            this.checks = [];
            this.allIds = [];
            this.edit = false;
            this.count = 0;
            this.getList(true);
          }).catch(this.$err);
        }).catch(() => {
          console.log('取消');
        });
      },
      toPlay(item) {
        if (this.edit) return this.editCheck(item);
        item = Object.assign(item, {
          is_free: true,
          id: item.resource_id
        });
        if (item.format_id === 1) {
          this.util.goToPlay(item);
        } else {
          this.util.goToPlay(item, () => {
            this.$router.push({
              name: 'PlayAudio',
              params: {
                cId: item.course_id,
                rId: item.id,
                rName: item.resources_name
              }
            });
          });
        }
      },
      getList(re) {
        if (re) {
          for (let k in this.list) {
            this.list[k].list = [];
          }
          if (this.curr !== 1) {
            return this.curr = 1;
          }
        }
        let path = this.hasAudio ? 'api/user/get_format_resources_record_list' : 'api/user/get_resources_record_list';
        this.http.$post(path, {
          page: this.curr,
          limits: this.limits,
          uid: this.userInfo.uid,
          product_id: this.productInfo.product_id,
          terminal_id: this.productInfo.terminal_id,
          channel_id: this.productInfo.channel_id
        }).then(res => {
          this.count += res.list.length;
          let date = new Date();
          let today = this.util.formatTime(date.getTime() / 1000, 'Y-MM-DD');
          date.setDate(date.getDate() - 1);
          let yesterday = this.util.formatTime(date.getTime() / 1000, 'Y-MM-DD');
          res.list.map(e => {
            switch (e.time_cha.split(' ')[0]) {
              case today:
                this.list.today.list.push(e);
                break;
              case yesterday:
                this.list.yesterday.list.push(e);
                break;
              default:
                this.list.earlier.list.push(e);
            }
            this.allIds.push(e.resource_id);
          });
          this.total = res.total;
          this.loading = false;
          if (this.checks.length !== this.allIds.length) {
            this.isChecks = false;
          }
        }).catch(this.$err);
      },
      selectAll() {
        this.checks = this.checks.length === this.allIds.length ? [] : [...this.allIds];
        this.isChecks = !this.isChecks;
      }
    },
    created() {
      this.getList(true);
    }
  };
</script>

<style scoped lang="less">
  .play-record {
    min-height: 100vh;
    background-color: #f5f5f5;
  }

  .van-list {
    padding-bottom: 3rem;
  }

  .no-record {
    padding-top: 8.13rem;
    font-size: 1rem;
    line-height: 1.25rem;
    color: #999;
    .img {
      width: 12rem;
      /*margin-bottom: ;*/
    }
  }

  .check {
    transition: width .3s;
    &.def {
      width: 2.75rem;
    }
    .check-inner {
      margin: 1.38rem 0 0 .5rem;
      width: 1rem;
      height: 1rem;
      border: solid 0.06rem #b5b5b5;
      background-color: #fff;
      .van-icon {
        display: none;
        line-height: 1rem;
      }
      &.checked {
        border: 0;
        background-color: #fa6058;
        .van-icon {
          display: block;
          font-size: .6rem;
          color: #fff;
        }
      }
    }
  }

  .item {
    padding: 0 1rem 1rem;
  }

  .inner {
    + .inner {
      margin-top: 1rem;
    }
  }

  .count {
    padding: 1.25rem 0 1rem;
    font-size: 1rem;
    line-height: 1;
    color: #999;
  }

  .bigimg {
    margin-right: .75rem;
    width: 6.63rem;
    height: 3.75rem;
  }

  .text {
    height: 3.75rem;
    line-height: 1.2;
    .title {
      font-size: .88rem;
      color: #333;
    }
    .remark {
      font-size: .75rem;
      color: #999;
    }
  }

  .footer {
    line-height: 3rem;
    background-color: #ffffff;
    box-shadow: 0 -.03rem 0 0 rgba(0, 0, 0, .12);
    font-size: 1rem;
    color: #333;
    .btn {
      /*padding: 0 2.53rem;*/
    }
    .del {
      color: #fa6058;
    }
  }
</style>
